<template>
  <div class="password-page" style="padding: 24px; background-color: #f0f2f5; min-height: calc(100vh - 60px);">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <h2>修改密码</h2>
      <el-tag type="info">{{ getRoleName(userInfo.role) }}</el-tag>
    </div>

    <!-- 密码修改卡片 -->
    <div class="card-container">
      <el-card class="password-card" shadow="hover">
        <el-form 
          :model="passwordForm" 
          :rules="passwordRules" 
          ref="passwordFormRef"
          label-width="100px"
          class="password-form"
        >
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input 
              type="password" 
              v-model="passwordForm.oldPassword" 
              :show-password="true"
              autocomplete="off"
            >
              <template #prepend>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="新密码" prop="newPassword">
            <el-input 
              type="password" 
              v-model="passwordForm.newPassword" 
              :show-password="true"
              autocomplete="off"
            >
              <template #prepend>
                <el-icon><Key /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input 
              type="password" 
              v-model="passwordForm.confirmPassword" 
              :show-password="true"
              autocomplete="off"
            >
              <template #prepend>
                <el-icon><Check /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item class="button-group">
            <el-button type="primary" @click="submitForm">
              <el-icon><Check /></el-icon>
              确认修改
            </el-button>
            <el-button @click="resetForm">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, inject } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElCard, ElForm, ElFormItem, ElInput, ElTag, ElButton, ElIcon } from 'element-plus'
import { Lock, Key, Check, Refresh } from '@element-plus/icons-vue'
import request from '@/utils/request';

// 注入用户信息
const userInfo = inject('userInfo')

// 路由实例
const router = useRouter()

// 表单引用
const passwordFormRef = ref()

// 表单数据
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})

// 密码验证规则
const validatePassword = (rule, value, callback) => {
  if (value.length < 6) {
    callback(new Error('密码长度不能少于6位'));
  } else {
    callback();
  }
};

const validateConfirmPassword = (rule, value, callback) => {
  if (value !== passwordForm.newPassword) {
    callback(new Error('两次输入密码不一致'));
  } else {
    callback();
  }
};

const passwordRules = reactive({
  oldPassword: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
  ],
  newPassword: [
    { required: true, validator: validatePassword, trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, validator: validateConfirmPassword, trigger: 'blur' },
  ],
})

// 获取角色名称
const getRoleName = (role) => {
  const roleMap = {
    'SUPER_ADMIN': '超级管理员',
    'ADMIN': '管理员',
    'MERCHANT': '商户',
    'USER': '普通用户'
  }
  return roleMap[role]
}

// 提交表单
const submitForm = () => {
  passwordFormRef.value.validate((valid) => {
    if (valid) {
      request.put('/user/password/' + userInfo.value.id, passwordForm).then(response => {
        if (response.code == '0') {
          ElMessage({
            type: 'success',
            message: '密码修改成功!请重新登录！'
          });
          resetForm();
          localStorage.removeItem("backUser");
          router.push({ path: '/login'});

        } else {
          ElMessage({
            type: 'error',
            message: response.msg
          });
        }
      });
    } else {
      return false;
    }
  });
}

// 重置表单
const resetForm = () => {
  passwordFormRef.value.resetFields();
}
</script>

<style scoped>
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: 500;
  color: #1f2f3d;
  margin: 0;
  margin-right: 15px;
}

.card-container {
  max-width: 800px;
  margin: 0 auto;
}

.password-card {
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.password-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #1f2f3d;
}

:deep(.el-input__inner) {
  border-radius: 4px;
}

:deep(.el-input-group__prepend) {
  background-color: #f5f7fa;
  border-color: #dcdfe6;
  color: #909399;
  padding: 0 15px;
}

.button-group {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

:deep(.el-button) {
  flex: 1;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

:deep(.el-button--primary) {
  background-color: #409eff;
  border-color: #409eff;
}

:deep(.el-button--primary:hover) {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

:deep(.el-button--default) {
  border-color: #dcdfe6;
}

:deep(.el-button--default:hover) {
  border-color: #c6e2ff;
  color: #409eff;
}

:deep(.el-tag) {
  height: 28px;
  line-height: 26px;
  padding: 0 10px;
  font-size: 13px;
}
</style>